<template>
  <div>
    <Card :shadow="shadow" >
      <div class="home-name">
        <div class="name">平台</div>
      </div>
      <Row :gutter="20" style="margin-top: 15px;">
        <i-col :xs="12" :md="8" :lg="4" v-for="(platform, index) in listData" :key="`platform${index}`" style="padding-bottom: 10px;">

          <div class="home-item">
            <div class="item-title">{{platform.title}}</div>
            <div class="item-font">{{platform.count}} <span style="color: #999; font-size: 15px;"></span></div>
          </div>
        </i-col>
      </Row>
    </Card>

    <Card :shadow="shadow" style="margin-top: 15px;">
      <div class="home-name">
        <div class="name">近七日平台交易金额</div>
      </div>
      <Row style="margin:40px 45px;">
        <i-col>
          <deals ref="chart" :echarData="echarData"  style="height: 300px;"/>
        </i-col>
      </Row>
    </Card>

  </div>
</template>

<script>
import { home } from '@/api/user'
import Deals from './deals.vue'

export default{
  // name: 'home',
  components: {
    Deals
  },
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      echarData: [],
      listData: [
        // { title: '今日充值订单', count: 2 },
        // { title: '今日充值金额', count: 20000 },
        // { title: '今日线下充值订单', count: 0 },
        // { title: '今日线下充值总额', count: 0 },
        { title: '待处理订单（个）', count: 1 },
        { title: '今日代付订单（个）', count: 3 },
        { title: '今日代付订单（元）', count: 3000 },
        // { title: '昨日充值订单', count: 0 },
        // { title: '昨日充值总额', count: 0 },
        // { title: '昨日线下充值订单', count: 0 },
        // { title: '昨日线下充值总额', count: 0 },
        { title: '昨日代付订单（个）', count: 0 },
        { title: '昨日代付订单（元）', count: 0 },
        { title: '今日新增商户（个）', count: 0 },
        { title: '昨日新增商户（个）', count: 0 },

        { title: '商户总数（个）', count: 5 },
        { title: '代付订单（个）', count: 33 },
        { title: '代付总额（元）', count: 14256 },
        { title: '代付利润（元）', count: 27432.15 }
      ]
    }
  },
  created () {
    this.getData()
  },

  methods: {
    getData () {
      home().then(res => {
        for (var i in this.listData) {
          this.listData[i].count = res.data.data[i]
        }
        this.echarData = JSON.parse(JSON.stringify(res.data.echarData))
        // this.eData = JSON.parse(JSON.stringify(res.data.echarData.dateArr))

        // this.tradeData = JSON.parse(JSON.stringify(res.data.echarData.trade_sum))
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style lang="less">
.home-name{
  height: 42px;
  border-bottom: 1px solid #f6f6f6;
  .name{
    margin: 0 15px;
    padding: 0;
    line-height: 42px;
  }
}
.home-item{
  display: block;
  padding: 10px 15px;
  background-color: #f8f8f8;
  color: #999;
  border-radius: 2px;
  transition: all .3s;
  -webkit-transition: all .3s;
  .home-title{
  }
  .item-font{
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: #009688;
  }
}
</style>
